<template>
  <div class="task-running push-list">
    <van-search v-model="keywords" placeholder="搜索" @search="onRefresh" />
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div class="gm-list-card" v-for="item in list" :key="item.Id">
          <van-tag v-if="item.UrgentTask" class="fix-tag" type="danger">
            <span>紧急</span>
          </van-tag>
          <van-cell class="gm-list-card-header" :title="item.Number">
            <span>{{ item.Step }}</span>
            <div class="status-text success" v-if="!item.ResponseTimeout">
              <van-icon name="passed" /> 响应正常
            </div>
            <div class="status-text danger" v-else>
              <i class="iconfont iconicon-zhiliuchaoshi1"></i> 响应超时
            </div>
            <div class="status-text success" v-if="!item.MaintenanceTimeout">
              <van-icon name="passed" /> 维修正常
            </div>
            <div class="status-text danger" v-else>
              <i class="iconfont iconicon-zhiliuchaoshi1"></i> 维修超时
            </div>
          </van-cell>
          <van-cell @click="$router.push(`/task-detail/${item.Id}`)">
            <div class="cont-title van-ellipsis">
              {{ item.OrderDescription }}
            </div>
            <ul class="cont-desc">
              <li>故障类型：{{ item.FailureType }}</li>
              <li>报修时间：{{ item.PresentationTime }}</li>
              <li>
                维修人员：{{
                  `${item.RepairPersonnelName || "无"}
                    ${item.RepairPersonnelPhone || ""}`
                }}
              </li>
              <li>
                协助人员：{{
                  `${item.AssistantsName || "无"}
                    ${item.AssistantsPhone || ""}`
                }}
              </li>
            </ul>
          </van-cell>
          <van-cell class="gm-list-card-footer">
            <van-button
              class="operate-btn"
              type="default"
              size="small"
              @click="handleOpenAssist(item)"
            >
              维修协助
            </van-button>
            <van-button
              class="operate-btn"
              type="default"
              size="small"
              @click="handleOpenGoods(item)"
            >
              领用部品
            </van-button>
            <van-button
              class="operate-btn"
              type="default"
              size="small"
              @click="handleComplete(item)"
            >
              维修完成
            </van-button>
            <van-button
              class="operate-btn"
              type="default"
              size="small"
              @click="handleOpenTransfer(item)"
            >
              转交任务
            </van-button>
          </van-cell>
        </div>
      </van-list>
    </van-pull-refresh>

    <!-- 维修协助 -->
    <assist-popup
      v-model="assistPopupShow"
      :active-data="activeData"
      @confirm="onRefresh"
    />

    <!-- 领用部品 -->
    <receiving-parts-popup
      v-model="RPartsPopupShow"
      :active-data="activeData"
      @confirm="onRefresh"
    />
    <!-- 维修完成 -->
    <complele-popup
      v-model="completePopupShow"
      :active-data="activeData"
      @confirm="onRefresh"
    />
    <!-- 转交任务 -->
    <transfer-popup
      v-model="transferPopupShow"
      :active-data="activeData"
      @confirm="onRefresh"
    />
  </div>
</template>

<script>
import {
  Pad_Repair_GetUnderRepair, // 获取列表
} from "../../api/index";

export default {
  name: "TaskRunning",
  data() {
    return {
      keywords: "",
      // 数据
      list: [],
      // 下拉刷新loading
      refreshing: false,
      // 上拉加载loading
      loading: false,
      // 数据全部加载完成
      finished: false,
      //列表分页
      taskPageCtrl: {
        page: 1,
        size: 5,
      },
      // 维修协助弹窗显示
      assistPopupShow: false,
      // 领用部品弹窗显示
      RPartsPopupShow: false,
      // 维修完成弹窗显示
      transferPopupShow: false,
      // 转交任务弹窗显示
      completePopupShow: false,
      // 当前项
      activeData: {},
    };
  },
  components: {
    "transfer-popup": () =>
      import("../../components/service/TransferPopup.vue"),
    "receiving-parts-popup": () =>
      import("../../components/service/ReceivingPartsPopup.vue"),
    "assist-popup": () => import("../../components/service/AssistPopup.vue"),
    "complele-popup": () =>
      import("../../components/service/CompletePopup.vue"),
  },
  methods: {
    // 刷新
    onRefresh() {
      this.refreshing = true;
      this.finished = false;
      // 重新加载数据
      this.loading = true;
      this.onLoad();
    },
    // 加载数据
    onLoad() {
      if (this.refreshing) {
        // 清空列表数据
        this.list = [];
        this.taskPageCtrl = {
          page: 1,
          size: 5,
        };
        this.refreshing = false;
      }

      if (!this.finished) {
        const params = {
          Page: this.taskPageCtrl.page,
          Number: this.taskPageCtrl.size,
          KeyWords: this.keywords,
        };

        Pad_Repair_GetUnderRepair(params)
          .then((res) => {
            // 加载状态结束
            this.loading = false;

            if (res.ReturnResult === "1") {
              this.list.push(...res.ReturnData.children);
              // 数据全部加载完成
              if (this.list.length === res.ReturnData.TotalRows) {
                this.finished = true;
              }
              this.taskPageCtrl.page++;
            } else {
              this.$notify(res.Message);
            }
          })
          .catch((err) => {
            this.$notify(err);
          });
      }
    },
    handleOpenAssist(item) {
      this.activeData = item;
      this.assistPopupShow = true;
    },
    handleOpenGoods(item) {
      this.activeData = item;
      this.RPartsPopupShow = true;
    },
    handleComplete(item) {
      this.activeData = item;
      this.completePopupShow = true;
    },
    handleOpenTransfer(item) {
      this.activeData = item;
      this.transferPopupShow = true;
    },
  },
};
</script>